<script setup>
import { CanvasRenderer } from 'echarts/renderers'

import { CountTo } from 'vue3-count-to'
import * as echarts from 'echarts/core'

import { GraphGLChart } from 'echarts-gl/charts'
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart, LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import $ from 'jquery'
import { nextTick, onMounted } from 'vue'
onMounted(async () => {
  await nextTick()
  echarts.use([GraphGLChart, CanvasRenderer])

  // var ROOT_PATH =
  //   'https://echarts.apache.org/examples/data-gl/asset/data/internet.graph.json'

  var chartDom3 = document.getElementById('mainwsq')
  var myChart3 = echarts.init(chartDom3)
  var option3

  $.getJSON(
    '../../../../public/FeHelper-20240707202806.json',
    function (graph) {
      var edges = graph.edges.map(function (edge) {
        return {
          source: edge[0],
          target: edge[1],
          value: 2
        }
      })
      var categories = []
      var categoriesMap = {}
      var nodes = graph.nodes.map(function (node) {
        if (!categoriesMap[node[3]]) {
          categories.push({
            name: node[3]
          })
          categoriesMap[node[3]] = true
        }
        return {
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight,
          // x: node[0],
          // y: node[1],
          symbolSize: node[2],
          category: node[3],
          value: 1
        }
      })
      myChart3.setOption({
        color: [
          'rgb(203,239,15)',
          'rgb(73,15,239)',
          'rgb(239,231,15)',
          'rgb(15,217,239)',
          'rgb(30,15,239)',
          'rgb(15,174,239)',
          'rgb(116,239,15)',
          'rgb(239,15,58)',
          'rgb(15,239,174)',
          'rgb(239,102,15)',
          'rgb(239,15,15)',
          'rgb(15,44,239)',
          'rgb(239,145,15)',
          'rgb(30,239,15)',
          'rgb(239,188,15)',
          'rgb(159,239,15)',
          'rgb(159,15,239)',
          'rgb(15,239,44)',
          'rgb(15,239,87)',
          'rgb(15,239,217)',
          'rgb(203,15,239)',
          'rgb(239,15,188)',
          'rgb(239,15,102)',
          'rgb(239,58,15)',
          'rgb(239,15,145)',
          'rgb(116,15,239)',
          'rgb(15,131,239)',
          'rgb(73,239,15)',
          'rgb(15,239,131)',
          'rgb(15,87,239)',
          'rgb(239,15,231)'
        ],
        series: [
          {
            type: 'graphGL',
            nodes: nodes,
            edges: edges,
            categories: categories.sort(function (a, b) {
              return a.name - b.name
            }),
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            },
            itemStyle: {
              opacity: 1
            },
            forceAtlas2: {
              steps: 1,
              stopThreshold: 1,
              jitterTolerence: 10,
              edgeWeight: [0.2, 1],
              gravity: 0,
              edgeWeightInfluence: 1,
              scaling: 0.2
            }
          }
        ]
      })
    }
  )

  option3 && myChart3.setOption(option3)

  echarts.use([
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    BarChart,
    LineChart,
    CanvasRenderer,
    UniversalTransition
  ])

  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: 'red'
        }
      }
    },

    toolbox: {
      feature: {
        dataView: {
          show: true,
          readOnly: false,
          title: '数据视图',
          iconStyle: {
            normal: {
              color: 'aqua'
            },
            emphasis: {
              color: 'darkblue'
            }
          }
        },
        magicType: {
          show: true,
          type: ['line', 'bar'],
          title: {
            line: '切换为折线图',
            bar: '切换为柱状图',
            stack: '切换为堆叠',
            tiled: '切换为平铺'
          },
          iconStyle: {
            normal: {
              color: 'aqua'
            },
            emphasis: {
              color: 'darkblue'
            }
          }
        },
        restore: {
          show: true,
          title: '还原',
          iconStyle: {
            normal: {
              color: 'aqua'
            },
            emphasis: {
              color: 'darkblue'
            }
          }
        },
        saveAsImage: {
          show: true,
          title: '保存为图片',
          iconStyle: {
            normal: {
              color: 'aqua'
            },
            emphasis: {
              color: 'darkblue'
            }
          }
        },
        backgroundColor: 'red',
        borderColor: 'red'
      }
    },
    legend: {
      data: ['已销售', '计划销售', '完成率']
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '2021-11',
          '2022-12',
          '2023-06',
          '2023-09',
          '2023-12',
          '2024-6',
          '2024-7'
        ],
        axisLabel: {
          textStyle: {
            color: '#0000CD' // 设置x轴文字颜色为红色
          }
        },
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '已销售',
        min: 0,
        max: 250,
        interval: 50,
        nameTextStyle: {
          color: '	#00BFFF' // 设置y轴名称颜色为绿色
        },
        axisLabel: {
          formatter: '{value} 万'
        }
      },
      {
        type: 'value',
        name: '完成率',
        min: 0,
        max: 25,
        interval: 5,
        nameTextStyle: {
          color: '#00FF7F' // 设置y轴名称颜色为绿色
        },
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '已销售',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + '万'
          }
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: '计划销售',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + '万'
          }
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: '完成率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%'
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  }

  option && myChart.setOption(option)
})
</script>

<template>
  <div style="height: 718px">
    <!-- 数据总览 -->
    <div style="margin-bottom: 5px">
      <dv-decoration7>
        <div style="font-size: 20px">数据总览</div>
      </dv-decoration7>
    </div>
    <div demo-bg style="width: 100%; height: 420px">
      <dv-border-box8 :dur="5" style="height: 510px">
        <!-- 第一部分 -->
        <div style="height: 30%; display: flex; flex-wrap: wrap">
          <div style="width: 33.3%; float: left">
            <span style="margin: 2px"> 今年累计销售额</span>
            <div style="margin-top: 5px; margin-left: 20px">
              <countTo
                :startVal="0"
                :endVal="1652626500"
                :duration="1000"
                style="color: aquamarine; margin-top: 5px"
              ></countTo>
            </div>
          </div>
          <div style="width: 33.3%; float: left">
            <span style="margin: 2px"> 本月累计销售额</span>
            <div style="margin-top: 5px; margin-left: 20px">
              <countTo
                :startVal="0"
                :endVal="65956"
                :duration="1000"
                style="color: aquamarine"
              ></countTo>
            </div>
          </div>
          <div style="width: 33.3%; float: left">
            <span style="margin: 2px"> 今日累计销售额</span>
            <div style="margin-top: 5px; margin-left: 20px">
              <countTo
                :startVal="0"
                :endVal="262656"
                :duration="1000"
                style="color: aquamarine"
              ></countTo>
            </div>
          </div>
          <div style="width: 33.3%">
            <span style="margin: 2px; float: left"> 本年累计碳排放</span>
            <div
              style="
                position: absolute;
                margin-left: 0px;
                margin-top: 30px;
                margin-left: 20px;
              "
            >
              <countTo
                :startVal="0"
                :endVal="9955151"
                :duration="1000"
                style="color: aquamarine"
              ></countTo>
            </div>
          </div>
          <div style="width: 33.3%">
            <span style="margin: 2px; float: left"> 本月累计碳排放</span>
            <div
              style="
                position: absolute;
                margin-left: 0px;
                margin-top: 30px;
                margin-left: 20px;
              "
            >
              <countTo
                :startVal="0"
                :endVal="1515144"
                :duration="1000"
                style="color: aquamarine"
              ></countTo>
            </div>
          </div>
          <div style="width: 33.3%">
            <span style="margin: 2px; float: left"> 今日累计碳排放</span>
            <div
              style="
                position: absolute;
                margin-left: 0px;
                margin-top: 30px;
                margin-left: 20px;
              "
            >
              <countTo
                :startVal="0"
                :endVal="265265165"
                :duration="1000"
                style="color: aquamarine"
              ></countTo>
            </div>
          </div>
        </div>
        <!-- 第二部分 -->
        <div small-bg style="height: 10%">
          <dv-decoration-10 style="width: 99%; height: 5px" />
        </div>
        <!-- 第三部分 -->
        <div style="height: 70%">
          <div w200 h160 flex justify-center items-center bg-dark>
            <div w740px h600px>
              <div style="width: 100%">
                <div id="mainwsq" style="width: 100%; height: 500px"></div>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box8>
    </div>

    <!-- 销售计划 -->
    <div demo-bg style="width: 100%; height: 230px; margin-top: 100px">
      <dv-border-box8 :dur="5" style="height: 290px">
        <div style="height: 100px">
          <dv-decoration7>
            <div style="font-size: 15px">销售计划</div>
          </dv-decoration7>
        </div>
        <div w740px h600px>
          <div id="main" style="width: 100%; height: 200px"></div>
        </div>
      </dv-border-box8>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
